<template>
    <div id="OrderForm">
        <!-- 查询条件 -->
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="3" :sm="3" :md="2" :lg="2" style="margin: 0 1% 0 2%">
                <!-- 获取所有客户 下拉框 -->
                <el-select clearable v-model="CustomerCode" placeholder="请选择">
                    <el-option v-for="item in CustomerOptions" :key="item.CustomerCode" :label="item.CustomerName" :value="item.CustomerCode"></el-option>
                </el-select>
            </el-col>
            <el-col :xs="8" :sm="8" :md="6" :lg="4" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="add">新增订单</el-button>
            </el-col>
        </div>
        <!-- 订单 表格 -->
        <el-table  max-height="600" class="table_OrderForm" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="CustomerCode" sortable label="客户代号"></el-table-column>
            <el-table-column prop="CustomerName" label="客户名称"></el-table-column>
            <el-table-column prop="SerialNumber" sortable label="订单流水号"></el-table-column>
            <el-table-column prop="OrderNumber" sortable label="订单代号"></el-table-column>
            <el-table-column prop="OrderQuantity" sortable label="订单数量"></el-table-column>
            <el-table-column prop="OrderDate" label="订单日期"></el-table-column>
            <el-table-column prop="SendGoodsAddress" sortable label="送货地址"></el-table-column>
            <el-table-column prop="CustomerAddress" sortable label="联系地址"></el-table-column>
            <el-table-column prop="ContactPeople" sortable label="联系人"></el-table-column>
            <el-table-column prop="MobilePhone" sortable label="手机号"></el-table-column>
            <el-table-column prop="Duty" sortable label="职务"></el-table-column>
            <el-table-column prop="CustomerMapNumber" sortable label="图号"></el-table-column>
            <el-table-column prop="RepairPiece" sortable label="修补件"></el-table-column>
            <el-table-column prop="ReMark" sortable label="备注"></el-table-column>
            <!-- 操作 -->
            <el-table-column prop="ModifyDate" sortable label="时间"></el-table-column>
            <el-table-column prop="OperationUser" sortable label="操作人员ID" v-if="false"></el-table-column>
            <el-table-column prop="OperationUserName" sortable label="操作人员"></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column prop="edit" label="操作" fixed="right" width="180">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增 订单  收货地址  联系人 -->
        <el-dialog title="新增订单" :visible.sync="dialogFormVisible" >
            <el-form :model="form" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <el-form-item label="客户代号" :label-width="formLabelWidth">
                    <el-select clearable v-model="valueAdd" placeholder="请选择">
                        <el-option v-for="item in CustomerOptionsAdd" :key="item.CustomerCode" :label="item.CustomerName" :value="item.CustomerCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单代号" :label-width="formLabelWidth">
                    <el-input v-model="form.OrderNumber" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="客户图号" :label-width="formLabelWidth">
                    <el-input v-model="form.CustomerMapNumber" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="订单数量" :label-width="formLabelWidth">
                    <el-input v-model="form.OrderQuantity" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单日期" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker
                                v-model="form.OrderDate"
                                type="date"
                                placeholder="选择日期" >
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="修补件" :label-width="formLabelWidth">
                    <el-input v-model="form.RepairPiece" type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.ReMark" type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <!-- 联系人 -->
                <el-form-item label="联系人员" :label-width="formLabelWidth">
                    <div style="display: flex">
                        <div style="flex: 1;">
                            <el-button type="primary" @click="Customer">选择</el-button>
                        </div>
                        <div style="flex: 8;">
                            <el-input :disabled="true" v-model="CusAddSelection3.ContactPeople"></el-input>
                        </div>
                        <div style="flex: 0.5;"></div>
                    </div>
                </el-form-item>
                <!-- 联系地址 -->
                <el-form-item label="联系地址" :label-width="formLabelWidth">
                    <div style="display: flex">
                        <div style="flex: 1;">
                            <el-button type="warning" @click="CusAddress">选择</el-button>
                        </div>
                        <div style="flex: 8;">
                            <el-input :disabled="true" v-model="CusAddSelection.CustomerAddress"></el-input>
                        </div>
                        <div style="flex: 0.5;"></div>
                    </div>
                </el-form-item>
                <!-- 送货地址 -->
                <el-form-item label="送货地址" :label-width="formLabelWidth">
                    <div style="display: flex">
                        <div style="flex: 1;">
                            <el-button type="success" @click="CusAddress2">选择</el-button>
                        </div>
                        <div style="flex: 8;">
                            <el-input :disabled="true" v-model="CusAddSelection2.SendGoodsAddress"></el-input>
                        </div>
                        <div style="flex: 0.5;"></div>
                    </div>
                    <!--<el-input v-model="form.SendAddressID" style="width: 85%" auto-complete="off"></el-input>-->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 新增订单里的  客户地址按钮 -->
        <el-dialog title="客户地址选择" :visible.sync="dialogCusAddVisible">
            <el-form :model="CusAddForm">
                <div style="text-align: left;height: 40px;width: 90%;margin: auto">请选择一行数据</div>
                <el-table @selection-change="handleSelectionChange1" max-height="600" class="table_customer" stripe border :data="tableCusAdd" tooltip-effect="dark"
                           style="width: 90%;text-align: center !important;margin: auto">
                    <el-table-column type="selection" ></el-table-column>
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerCode" sortable label="客户代号"></el-table-column>
                    <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="CustomerAddress" label="客户地址"></el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCusAddVisible = false">取 消</el-button>
                <el-button type="danger" @click="dialogCusAddVisible = false">确定</el-button>
            </div>
        </el-dialog>
        <!-- 新增订单里的  送货地址按钮  -->
        <el-dialog title="送货地址选择" :visible.sync="dialogCusAdd2Visible">
            <el-form :model="CusAdd2Form">
                <div style="text-align: left;height: 40px;width: 90%;margin: auto">请选择一行数据</div>
                <el-table @selection-change="handleSelectionChange2" max-height="600" class="table_customer" stripe border :data="tableCusAdd2" tooltip-effect="dark"
                          style="width: 90%;text-align: center !important;margin: auto">
                    <el-table-column type="selection" label="序号"></el-table-column>
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerCode" sortable label="客户代号"></el-table-column>
                    <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="SendGoodsAddress" label="送货地址"></el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCusAdd2Visible = false">取 消</el-button>
                <el-button type="danger" @click="dialogCusAdd2Visible = false" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 新增订单里的  联系人按钮    -->
        <el-dialog title="联系人选择" :visible.sync="dialogCusVisible">
            <el-form :model="CusForm">
                <div style="text-align: left;height: 40px;width: 90%;margin: auto">请选择一行数据</div>
                <el-table @selection-change="handleSelectionChange3" max-height="600" class="table_customer" stripe border :data="tableCus" tooltip-effect="dark"
                          style="width: 90%;text-align: center !important;margin: auto">
                    <el-table-column type="selection" label="序号"></el-table-column>
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerCode" sortable label="客户代号"></el-table-column>
                    <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="ContactPeople" label="联系人员"></el-table-column>
                    <el-table-column prop="MobilePhone" label="手机号码"></el-table-column>
                    <el-table-column prop="Duty" label="职务"></el-table-column>
                    <el-table-column prop="Remark" label="备注"></el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCusVisible = false">取 消</el-button>
                <el-button type="danger" @click="dialogCusVisible = false" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 修改订单 -->
        <el-dialog title="修改订单" :visible.sync="EditFormVisible">
            <el-form :model="formEdit" style="text-align: left;width: 90%;margin: auto">
                <el-form-item label="客户代号" :label-width="formLabelWidthEdit">
                    <el-select clearable v-model="formEdit.CustomerCode" placeholder="请选择">
                        <el-option v-for="item in CustomerOptionsEdit" :key="item.CustomerCode" :label="item.CustomerName" :value="item.CustomerCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单代号" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.OrderNumber" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="客户图号" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.CustomerMapNumber" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="订单数量" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.OrderQuantity" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单日期" :label-width="formLabelWidthEdit">
                    <div class="block">
                        <el-date-picker
                                v-model="formEdit.OrderDate"
                                type="date"
                                placeholder="选择日期" >
                        </el-date-picker>
                    </div>
                    <!--<el-input v-model="formEdit.OrderDate" style="width: 85%" auto-complete="off"></el-input>-->
                </el-form-item>
                <el-form-item label="修补件" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.RepairPiece" type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.ReMark" type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <!-- 联系人 按钮 -->
                <el-form-item label="联系人员" :label-width="formLabelWidth">
                    <div style="display: flex">
                        <div style="flex: 1;">
                            <el-button type="primary" @click="CustomerEdit">选择</el-button>
                        </div>
                        <div style="flex: 8;">
                            <el-input :disabled="true" v-model="formEdit.ContactPeople"></el-input>
                        </div>
                        <div style="flex: 0.5;"></div>
                    </div>
                </el-form-item>
                <!-- 客户地址按钮 -->
                <el-form-item label="客户地址" :label-width="formLabelWidth">
                    <div style="display: flex">
                        <div style="flex: 1;">
                            <el-button type="warning" @click="CusAddressEdit">选择</el-button>
                        </div>
                        <div style="flex: 8;">
                            <el-input :disabled="true" v-model="formEdit.CustomerAddress"></el-input>
                        </div>
                        <div style="flex: 0.5;"></div>
                    </div>
                </el-form-item>
                <!-- 送货地址按钮 -->
                <el-form-item label="送货地址" :label-width="formLabelWidth">
                    <div style="display: flex">
                        <div style="flex: 1;">
                            <el-button type="success" @click="CusAddress2Edit">选择</el-button>
                        </div>
                        <div style="flex: 8;">
                            <el-input :disabled="true" v-model="formEdit.SendGoodsAddress"></el-input>
                        </div>
                        <div style="flex: 0.5;"></div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 客户地址  联系地址  -->
        <el-dialog title="客户地址选择" :visible.sync="dialogCusAddVisibleEdit">
            <el-form :model="CusAddFormEdit">
                <div style="text-align: left;height: 40px;width: 90%;margin: auto">请选择一行数据</div>
                <el-table @selection-change="handleSelectionChangeEdit1" max-height="600" class="table_customer" stripe border :data="tableCusAddEdit" tooltip-effect="dark"
                          style="width: 90%;text-align: center !important;margin: auto">
                    <el-table-column type="selection" label="序号"></el-table-column>
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerCode" sortable label="客户代号"></el-table-column>
                    <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="CustomerAddress" label="客户地址"></el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCusAddVisibleEdit = false">取 消</el-button>
                <el-button type="danger" @click="dialogCusAddVisibleEdit = false">确定</el-button>
            </div>
        </el-dialog>
        <!-- 修改订单里的  联系人按钮    -->
        <el-dialog title="联系人选择" :visible.sync="dialogCusVisibleEdit">
            <el-form :model="CusFormEdit">
                <div style="text-align: left;height: 40px;width: 90%;margin: auto">请选择一行数据</div>
                <el-table @selection-change="handleSelectionChangeEdit3" max-height="600" class="table_customer" stripe border :data="tableCusEdit" tooltip-effect="dark"
                          style="width: 90%;text-align: center !important;margin: auto">
                    <el-table-column type="selection" label="序号"></el-table-column>
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerCode" sortable label="客户代号"></el-table-column>
                    <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="ContactPeople" label="联系人员"></el-table-column>
                    <el-table-column prop="MobilePhone" label="手机号码"></el-table-column>
                    <el-table-column prop="Duty" label="职务"></el-table-column>
                    <el-table-column prop="Remark" label="备注"></el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCusVisibleEdit = false">取 消</el-button>
                <el-button type="danger" @click="dialogCusVisibleEdit = false" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 送货地址 >>>》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》  -->
        <el-dialog title="送货地址选择" :visible.sync="dialogCusAdd2VisibleEdit">
            <el-form :model="CusAdd2FormEdit">
                <div style="text-align: left;height: 40px;width: 90%;margin: auto">请选择一行数据</div>
                <el-table @selection-change="handleSelectionChange2Edit" max-height="600" class="table_customer" stripe border :data="tableCusAdd2Edit" tooltip-effect="dark"
                          style="width: 90%;text-align: center !important;margin: auto">
                    <el-table-column type="selection" label="序号"></el-table-column>
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerCode" sortable label="客户代号"></el-table-column>
                    <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="SendGoodsAddress" label="送货地址"></el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCusAdd2VisibleEdit = false">取 消</el-button>
                <el-button type="danger" @click="dialogCusAdd2VisibleEdit = false" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 删除订单 -->
        <el-dialog title="删除订单" :visible.sync="DeleteOrderVisible">
            <el-form :model="formOrderDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此订单吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteOrderVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteOrderForm" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return {
                //   订单 表格
                tableData:[],
                //   按条件 查询 订单
                CustomerCode: '',
                //   所有客户下拉框
                CustomerOptions:[] ,
                //     分页
                PageCount:10 ,    // 每页几条   page-size
                CurrentPage:1,   // 当前是第几页
                Total:0,    // 总数
                //    新增 订单
                OrderDate:'',   //   订单日期转换
                dialogFormVisible: false,
                CustomerOptionsAdd:[] ,
                valueAdd:'',   //  下拉框选的 客户
                form: {
                    OrderNumber:'',    //  客户订单号
                    CustomerMapNumber: '',  //  图号
                    OrderQuantity: '',    //  订单数量
                    CustomerAddressID: '',      //  客户地址ID
                    SendAddressID: '',           //  送货地址ID
                    ContactPeopleID: '',   //  联系人ID
                    RepairPiece: '',     //  修补件
                    OrderDate: '',    //  订单日期
                    ReMark:'',     //  备注
                },
                formLabelWidth: '120',
                //   新增订单里的  客户地址按钮
                dialogCusAddVisible:false,
                CusAddForm:{},
                tableCusAdd:[],
                CusAddSelection:{},  //  集合
                //   新增订单里的  送货地址按钮
                dialogCusAdd2Visible:false,
                CusAdd2Form:{},
                tableCusAdd2:[],
                CusAddSelection2:{},  //  集合
                //   联系人
                dialogCusVisible:false,
                CusForm:{},
                tableCus:[],
                CusAddSelection3:{},  //   联系人 集合
                //   修改订单  编辑
                EditAddress1:'',    //  传给后台的  客户地址ID
                EditCustomer1:'',    //  传给后台的  联系人员ID
                EditAddress2:'',    //  传给后台的  送货地址ID
//                EditOrderDate:'',    //   订单日期
                CustomerOptionsEdit:[],  //  用户下拉框
                EditFormVisible: false,
                formEdit:{},
                formLabelWidthEdit:'120',
                //  修改里面的  送货地址  客户地址  联系人
                //   联系人
                dialogCusVisibleEdit:false,
                CusFormEdit:{},
                tableCusEdit:[],
                CusSelectionEdit3:{},  //   联系人 集合
                //   客户地址
                dialogCusAddVisibleEdit:false,
                CusAddFormEdit:{},
                tableCusAddEdit:[],
                CusAddSelectionEdit:{},  //  集合
                //   送货地址
                dialogCusAdd2VisibleEdit:false,
                CusAdd2FormEdit:{},
                tableCusAdd2Edit:[],
                CusAddSelection2Edit:{},  //  集合
                //   删除订单
                DeleteOrderVisible: false,
                formOrderDelete:{},
            }
        },
        methods: {
            //  获取 所有客户 下拉框
            GetCusSelection(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/CustomerManager/GetAllCustomer" ;
                console.log(url);
                this.$http.get(url,).then(res=>{
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.CustomerOptions = res.data.ObjList ;
                    }
                    console.log("客户下拉框")
                    console.log(this.CustomerOptions)
                }, response => {
                    console.log(" 下拉框添加失败")
                    console.log(response)
                })
            },
            //    分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //   订单  表格
            selectTable(){
                let url = "http://192.168.3.238:8088/OrderManager/GetOrderPage?CustomerCode=" + this.CustomerCode +
                    "&PageCount="+this.PageCount+"&CurrentPage="+ this.CurrentPage ;
                console.log(url);
                this.$http.get(url,).then(res=>{
                    this.tableData=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableData.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("客户表格")
                    console.log(res)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            //  新增时  获取 所有客户 下拉框
            GetCusSelectionAdd(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/CustomerManager/GetAllCustomer" ;
                console.log(url);
                this.$http.get(url,).then(res=>{
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.CustomerOptionsAdd = res.data.ObjList ;
                    }
                    console.log("客户下拉框")
                    console.log(this.CustomerOptions)
                }, response => {
                    console.log(" 下拉框添加失败")
                    console.log(response)
                })
            },
            //  新增 订单
            add() {
                console.log("点击新增按钮 ")
                this.GetCusSelectionAdd();
                this.dialogFormVisible = true;
            },
            addForm(){
                //   post
                if(this.form.OrderDate.length != 0){
                    this.OrderDate = this.formatDate(this.form.OrderDate)
                }
                console.log("订单日期")
                console.log(this.form.OrderDate)
                console.log(this.OrderDate)
                let addUrl = "http://192.168.3.238:8088/OrderManager/AddOrder";
                let addForm = {
                    "CustomerCode":this.valueAdd,     //  下拉框选择的客户号
                    "OrderNumber":this.form.OrderNumber,     // 订单号
                    "CustomerMapNumber": this.form.CustomerMapNumber,  //  图号
                    "OrderQuantity": this.form.OrderQuantity,    //  订单数量
                    "CustomerAddressID": this.CusAddSelection.ID,      //  客户地址ID
                    "SendAddressID": this.CusAddSelection2.ID,           //  送货地址ID
                    "ContactPeopleID": this.CusAddSelection3.ID,   //  联系人ID
                    "RepairPiece": this.form.RepairPiece,     //  修补件
                    "OrderDate": this.OrderDate,    //  订单日期
                    "ReMark": this.form.ReMark,    //  备注
                    "OperationUser":1
                };
                console.log("addForm是什么");
                console.log(addForm);
                let that = this ;
                if(this.form.OrderNumber.length === 0){
                    alert("请输入客户订单号");
                    return 0;
                }else{
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            console.log(response);
                            that.dialogFormVisible = false ;
                            that.selectTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
                }
            },
            // 1、 点开  联系（客户）地址
            CusAddress() {
                console.log("点击客户地址按钮 ")
                this.CusAddressTable();
                this.dialogCusAddVisible = true;
            },
            // 2、 展示 客户地址表格
            CusAddressTable(){
                //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/GetCustomerAddress?CustomerCode="+this.valueAdd;
                console.log(addUrl)
                this.$http.get(addUrl,).then(res=>{
                    this.tableCusAdd=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableCusAdd.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("客户地址表格")
                    console.log(res)
                }, response => {
                    console.log("表格添加失败")
                    console.log(response)
                })
            },
            // 3、 选择 集合
            handleSelectionChange1(val) {
                console.log("客户地址")
                for(let i=0; i<val.length; i++){
                    this.CusAddSelection = val[0];
                }
                console.log(this.CusAddSelection);
            },
            //  送货地址
            //  1、点击送货地址按钮，展开弹框
            CusAddress2() {
                console.log("点击送货地址按钮")
                this.CusAddressTable2();
                this.dialogCusAdd2Visible = true;
            },
            //  2、获取送货地址表格
            CusAddressTable2(){
                //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/GetCustomerSendAddress?CustomerCode="+this.valueAdd;
                console.log(addUrl)
                this.$http.get(addUrl,).then(res=>{
                    this.tableCusAdd2=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableCusAdd2.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("送货地址表格")
                    console.log(res)
                }, response => {
                    console.log("送货地址添加失败")
                    console.log(response)
                })
            },
            //  3、点击获取选择的是哪一个送货地址集合，把得到的集合地址绑定到外面的input框里，把地址ID作为参数值传给后台
            handleSelectionChange2(val) {
                console.log("送货地址")
                for(let i=0; i<val.length; i++){
                    this.CusAddSelection2 = val[0];
                }
                console.log(this.CusAddSelection2);
            },
            //  联系人
            //  1、点击联系人按钮，展开弹框
            Customer() {
                console.log("点击联系人按钮")
                this.GettableCus();
                this.dialogCusVisible = true;
            },
            //  2、获取联系人表格
            GettableCus(){
                //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/GetCustomerContactPeople?CustomerCode="+this.valueAdd;
                console.log(addUrl);
                this.$http.get(addUrl,).then(res=>{
                    this.tableCus=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableCus.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("人员表格")
                    console.log(res)
                }, response => {
                    console.log("人员表格添加失败")
                    console.log(response)
                })
            },
            //  3、点击获取选择的是哪一个联系人集合，把得到的集合联系人绑定到外面的input框里，把人员ID作为参数值传给后台
            handleSelectionChange3(val) {
                console.log("联系人员")
                for(let i=0; i<val.length; i++){
                    this.CusAddSelection3 = val[0];
                }
                console.log(this.CusAddSelection3);
            },
            //  修改订单
            handleEdit(index, row) {
                this.GetCusSelectionEdit();
                this.EditFormVisible = true;
                this.formEdit = row ;
                console.log("点击编辑按钮")
                console.log(this.formEdit)
            },
            // 点击 修改订单 获取  客户下拉框
            GetCusSelectionEdit(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/CustomerManager/GetAllCustomer" ;
                console.log(url);
                this.$http.get(url,).then(res=>{
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.CustomerOptionsEdit = res.data.ObjList ;
                    }
                    console.log("客户下拉框")
                    console.log(this.CustomerOptionsEdit)
                }, response => {
                    console.log(" 下拉框添加失败")
                    console.log(response)
                })
            },
            //  修改订单 确定按钮
            EditForm() {    //   post
                if(this.CusAddSelectionEdit.ID){    //  客户地址
                    this.EditAddress1 = this.CusAddSelectionEdit.ID;
                }else{
                    this.EditAddress1 = this.formEdit.CustomerAddressID;
                };
                if(this.CusSelectionEdit3.ID){    //  联系人
                    this.EditCustomer1 = this.CusSelectionEdit3.ID;
                }else{
                    this.EditCustomer1 = this.formEdit.ContactPeopleID;
                };
                if(this.CusAddSelection2Edit.ID){    //  送货地址
                    this.EditAddress2 = this.CusAddSelection2Edit.ID;
                }else{
                    this.EditAddress2 = this.formEdit.SendAddressID ;
                };
                console.log(" 客户地址 联系人  送货地址  》》》》》》》》》》》》》》》》》》》》》")
                console.log(this.EditAddress1)
                console.log(this.EditCustomer1)
                console.log(this.EditAddress2)
                let EditUrl = "http://192.168.3.238:8088/OrderManager/UpdateOrder";
                let EditForm = {
                    "CustomerCode":this.formEdit.CustomerCode,   //   客户代号
                    "SerialNumber":this.formEdit.SerialNumber,   //  流水号
                    "OrderNumber":this.formEdit.OrderNumber,     //  订单号
                    "CustomerMapNumber":this.formEdit.CustomerMapNumber,  //  图号
                    "OrderQuantity":this.formEdit.OrderQuantity,  //  订单数量
                    "ReMark":this.formEdit.ReMark,  //  备注
                    "CustomerAddressID":this.EditAddress1,   //  联系地址ID
                    "SendAddressID":this.EditAddress2,      //  送货地址ID
                    "ContactPeopleID":this.EditCustomer1,      //  联系人ID
                    "RepairPiece":this.formEdit.RepairPiece,  //  修补件
                    "OrderDate":this.formEdit.OrderDate,   //  订单日期
                    "OperationUser":1
                };
                console.log("修改订单");
                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //  修改里面的  联系人
            //  1、点击联系人按钮，展开弹框
            CustomerEdit() {
                console.log("点击联系人按钮")
                this.GettableCusEdit();
                this.dialogCusVisibleEdit = true;
            },
            //  2、获取联系人表格
            GettableCusEdit(){
                //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/GetCustomerContactPeople?CustomerCode="+this.formEdit.CustomerCode;
                console.log(addUrl);
                this.$http.get(addUrl,).then(res=>{
                    this.tableCusEdit=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableCusEdit.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("人员表格")
                    console.log(res)
                }, response => {
                    console.log("人员表格添加失败")
                    console.log(response)
                })
            },
            //  3、点击获取选择的是哪一个联系人集合，把得到的集合联系人绑定到外面的input框里，把人员ID作为参数值传给后台
            handleSelectionChangeEdit3(val) {
                for(let i=0; i<val.length; i++){
                    this.CusSelectionEdit3 = val[0];
                    this.formEdit.ContactPeople = val[0].ContactPeople;
                }
                console.log("联系人员")
                console.log(this.formEdit.ContactPeople);
            },
            //  修改里面的  客户地址
            // 1、 点开  联系（客户）地址
            CusAddressEdit() {
                console.log("点击客户地址按钮 ")
                this.CusAddressTableEdit();
                this.dialogCusAddVisibleEdit = true;
            },
            // 2、 展示 客户地址表格
            CusAddressTableEdit(){     //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/GetCustomerAddress?CustomerCode="+this.formEdit.CustomerCode;
                console.log(addUrl)
                this.$http.get(addUrl,).then(res=>{
                    this.tableCusAddEdit=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableCusAddEdit.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("客户地址表格")
                    console.log(res)
                }, response => {
                    console.log("表格添加失败")
                    console.log(response)
                })
            },
            // 3、 选择 集合
            handleSelectionChangeEdit1(val) {
                console.log("客户地址")
                for(let i=0; i<val.length; i++){
                    this.CusAddSelectionEdit = val[0];
                    this.formEdit.CustomerAddress = val[0].CustomerAddress;
                }
                console.log(this.CusAddSelectionEdit);
            },
            //  修改里面的  收货地址
            //  1、点击送货地址按钮，展开弹框
            CusAddress2Edit() {
                console.log("点击送货地址按钮")
                this.CusAddressTable2Edit();
                this.dialogCusAdd2VisibleEdit = true;
            },
            //  2、获取送货地址表格
            CusAddressTable2Edit(){   //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/GetCustomerSendAddress?CustomerCode="+this.formEdit.CustomerCode;
                console.log(addUrl)
                this.$http.get(addUrl,).then(res=>{
                    this.tableCusAdd2Edit=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableCusAdd2Edit.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("送货地址表格")
                    console.log(res)
                }, response => {
                    console.log("送货地址添加失败")
                    console.log(response)
                })
            },
            //  3、点击获取选择的是哪一个送货地址集合，把得到的集合地址绑定到外面的input框里，把地址ID作为参数值传给后台
            handleSelectionChange2Edit(val) {
                console.log("送货地址")
                for(let i=0; i<val.length; i++){
                    this.CusAddSelection2Edit = val[0];
                    this.formEdit.SendGoodsAddress = val[0].SendGoodsAddress
                }
                console.log(this.CusAddSelection2Edit);
            },
            //  删除订单
            handleDelete(index, row) {
                this.DeleteOrderVisible = true ;
                this.formOrderDelete = row ;
            },
            DeleteOrderForm(){
                let DeleteUrl = "http://192.168.3.238:8088/OrderManager/DeleteOrder";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "SerialNumber":this.formOrderDelete.SerialNumber,
                    "OperationUser":1
                };
                console.log("删除")
                console.log(DeleteUrl)
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (res) {
                        console.log("删除成功")
                        console.log(res)
                        that.DeleteOrderVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },

            //   日期转换
            formatTen(num) {
                return num > 9 ? (num + "") : ("0" + num);
            } ,
            formatDate(date) {
                let year,month,day;
                year = date.getFullYear();
                month = date.getMonth() + 1;
                day = date.getDate();
                return year + "-" + this.formatTen(month) + "-" + this.formatTen(day);
            },

        },
        mounted: function () {   //  onload
            this.GetCusSelection();
            this.selectTable();
        }
    }
</script>

<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #OrderForm {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_OrderForm thead tr th {
        text-align: center;
    }
</style>